<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <template #top>
      <u-navbar
        back-text=""
        :title="'我的' + ticketCardObj[ticketCardType]"
        :background="navBackground"
        back-icon-size="30rpx"
        :is-fixed="false"
        title-color="#000"
        back-icon-color="#000"></u-navbar>
    </template>
    <view w-full px-20rpx box-border>
      <view
        v-for="(item, index) in dataList"
        mt-20rpx
        w-full
        h-240rpx
        bg="#fff"
        rounded-20rpx
        box-border
        px-20rpx
        py-50rpx
        flex
        items-center
        relative
        @click="toDetail(item)">
        <image mode="aspectFill" w-140rpx h-140rpx rounded-20rpx mr-30rpx :src="item.img"></image>
        <view flex flex-col justify-between h-140rpx>
          <view text-32rpx font-500 mb-10rpx>
            {{ ticketCardObj[ticketCardType] }}号：{{ ticketCardType === 1 ? item.ticketNo : item.memberNumber }}
          </view>
          <view text-24rpx>绑定成员：{{ item.memberName }}</view>
          <view text-24rpx>绑定时间：{{ item.createTime }}</view>
        </view>
        <view
          v-if="item.effectiveStatus == 0"
          absolute
          right-0
          top-0
          w-120rpx
          h-60rpx
          rounded-tr-20rpx
          rounded-bl-40rpx
          :style="{ backgroundColor: '#FF7171' }"
          text-24rpx
          text="#fff"
          flex
          justify-center
          items-center>
          已失效
        </view>
      </view>
    </view>
    <template #empty>
      <view w-710rpx h-full flex justify-center items-center>
        <image w-670rpx h-262rpx src="@/pages/ticket/static/ticket_empty.png"></image>
      </view>
    </template>
    <template #bottom>
      <view w-full px-40rpx pb-46rpx pt-20rpx box-border>
        <view
          w-670rpx
          h-100rpx
          rounded-50rpx
          bg="#FCC300"
          flex
          justify-center
          items-center
          font-500
          text="#000"
          text-32rpx
          @click="toBindTicket">
          绑定{{ ticketCardObj[ticketCardType] }}
        </view>
      </view>
    </template>
  </z-paging>

  <!-- <scroll-view
    scroll-y
    enhanced
    :show-scrollbar="false"
    >
    <view v-if="dataList.length === 0" w-710rpx h-full flex justify-center items-center>
      <image w-670rpx h-262rpx src="@/pages/ticket/static/ticket_empty.png"></image>
    </view>
  </scroll-view> -->
</template>

<script setup lang="ts">
import { selectMyTicketList, selectMyMemberCardList } from '@/api/myMemberCardAndTicket'
import { onLoad, onShow } from '@dcloudio/uni-app'
import uNavbar from '@/components/navbar/index.vue'
import config from '@/config/config'
const paging = ref<any>(null)
const navBackground = ref({
  background: 'url(' + config.yellowNavBg + ') no-repeat'
})

const ticketCardType = ref<number>(1)
const ticketCardObj = ref<any>({
  1: '电子票',
  2: '手环'
})

const dataList = ref<any>([])
function toBindTicket() {
  uni.navigateTo({
    url: '/pages/ticket/bindTicket?ticketCardType=' + ticketCardType.value
  })
}

function toDetail(item: any) {
  // if (item.effectiveStatus == 0) {
  //   uni.showToast({
  //     title: `该${ticketCardObj.value[ticketCardType.value]}已失效`,
  //     icon: 'none'
  //   })
  //   return
  // }
  uni.navigateTo({
    url:
      '/pages/ticket/myTicketDetail?ticketCardType=' +
      ticketCardType.value +
      '&no=' +
      (ticketCardType.value === 1 ? item.ticketNo : item.memberNumber)
  })
}

const queryList = (pageNo: number, pageSize: number) => {
  const api = ticketCardType.value === 1 ? selectMyTicketList : selectMyMemberCardList
  api({
    pageNumber: pageNo,
    pageSize: pageSize
  })
    .then((res: any) => {
      paging.value.complete(res.data.result.records)
    })
    .catch(() => {
      paging.value.complete(false)
    })
}

onMounted(() => {})
onLoad((options: any) => {
  ticketCardType.value = parseInt(options.ticketCardType)
})
onShow(() => {
  if (paging.value) {
    paging.value.reload()
  }
})
</script>
<style>
page {
}
</style>
<style scoped lang="scss"></style>
